<template>
    <div class="imageLi">
        <div class="kong"></div>
        <div  v-for="item in imageInfo" :key="item.id">
        <!-- 标题 -->
        <h3 v-text="item.title" class="title"></h3>

        <!-- 发布时间 + 点击次数 -->
        <div class="time-info">
        <!-- 我开始直接用substr 包有渲染错误的红色错误警告 -->
        <span v-cloak>发表时间：{{item.add_time.substr(0, 10)}}</span>
        <span v-cloak>点击次数：{{item.click}}</span>
        </div>
        <van-grid :border="false" :column-num="3">
            <van-grid-item v-for="(value,i) in thumimages" :key="i" @click="imagePreviews(i)">
                <van-image :src="value.src" v-lazy="value.src"/>
            </van-grid-item>
        </van-grid>
        <!-- 具体内容 -->
        <div class="main" v-html="item.content"></div>
        </div>

        <!-- 引入评论组件 -->
        <ach-comments></ach-comments>
    </div>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
  data () {
    return {
      imageInfo: [],
      thumimages: [],
      imagePreview: []
    }
  },
  methods: {
    async getimageInfo () {
      const { data: res } = await this.$http.get('/api/getimageInfo/' + this.$route.params.id)
      this.imageInfo = res.message
    },
    async getthumimages () {
      const { data: res } = await this.$http.get('/api/getthumimages/' + this.$route.params.id)
      this.thumimages = res.message
      this.thumimages.forEach(i => this.imagePreview.push(i.src))
    },
    imagePreviews (i) {
      ImagePreview({
        images: this.imagePreview,
        startPosition: i
      })
    }
  },
  created () {
    this.getimageInfo()
    this.getthumimages()
  }
}
</script>

<style lang="less" scoped>
.imageLi{
    padding: 0 10px;
}
// 标题样式
.title {
  color: #1989fa;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  padding: 5px 0;
}
// 发布时间 + 点击次数
.time-info {
  display: flex;  /*弹性盒子*/
  // flex-flow: row nowrap;  /*子元素溢出父容器时换行*/
  justify-content: space-between;  /*两端对齐，子元素之间有间隙*/
  border-bottom: 1px solid #ccc;
  padding: 7px 0;
  font-size: 13px;
  color: #1989fa;
}

// 具体内容样式
.main {
  font-size: 14px;
  p {
    color: #535353;
  }
  b {
    font-weight: bold;
  }
}
.kong{
  height: 1.06667rem;
}
</style>
